<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>购物车</title>
		<link rel="stylesheet" type="text/css" href="css/cart.css" />
	</head>

	<body>
		<div id="header">
			<div id="headermain">
				<div class="logo fl">
					<img src="img/SY/logo.png" style="margin-right: 45px;" align="center" />我的购物车<span style="font-size: 12px;margin-left: 12px;">温馨提示：产品是否购买成功，以最终下单为准哦，请尽快结算</span>
				</div>
				<ul class="fr">
					<li>
						<a href="login.html">登录 | </a>
						<a href="register.html">注册</a>
					</li>
				</ul>
			</div>
		</div>
		<div class="bg">
			<div id="main">
				<table border="0" cellspacing="0" cellpadding="0" width="1220px" align="center" id="tab">
					<thead>
						<tr height="40px" bgcolor="#F5F5F5">
							<td colspan="9"></td>
						</tr>
						<tr height="65px" style="font-size: 14px;">
							<td width="70px" align="center" valign="center"><i id="quanxuan"></i> <span class="fr">全选</span></td>
							<td width="130px"></td>
							<td width="400px" align="left" valign="center">商品名称</td>
							<td width="55px" align="right" valign="center">单价</td>
							<td width="280px" align="center" valign="center" colspan="3">数量</td>
							<td width="75px" align="right" valign="center">小计</td>
							<td align="center" valign="center">操作</td>
						</tr>
						<tr>
							<td colspan="9">
								<hr />
							</td>
						</tr>
					</thead>
					<tbody id="tby">
						<tr height="115px" valign="center">
							<td class="jianju"><i></i></td>
							<td align="center"><img src="img/cart/pms_1490088801.23224822!80x80.jpg" /></td>
							<td align="left">
								<a href="#">小米手机5s Plus高配全网通版 64G内存 灰...</a>
							</td>
							<td>2599元</td>
							<td align="right" width="115px"><input type="button" name="" id="inputbtn1" value="-" /></td>
							<td width="70px"><input type="text" name="" class="inputtxt" value="1" onmouseleave="liKai(this)" /></td>
							<td width="115px" align="left"><input type="button" name="" id="inputbtn2" value="+" /></td>
							<td class="xiaoji">2599元</td>
							<td align="center"><input type="button" name="" id="del" value="x" onclick="delproduct(this)" /></td>
						</tr>
						<tr>
							<td colspan="9">
								<hr />
							</td>
						</tr>
						<tr height="115px" valign="center">
							<td class="jianju"><i></i></td>
							<td align="center"><img src="img/cart/pms_1468287589.40786199!80x80.jpg" /></td>
							<td align="left">
								<a href="#">小米随身风扇 蓝色</a>
							</td>
							<td>19.9元</td>
							<td align="right" width="115px"><input type="button" name="" id="inputbtn1" value="-" /></td>
							<td width="70px"><input type="text" name="" class="inputtxt" value="1" onmouseleave="liKai(this)" /></td>
							<td width="115px" align="left"><input type="button" name="" id="inputbtn2" value="+" /></td>
							<td class="xiaoji">19.9元</td>
							<td align="center"><input type="button" name="" id="del" value="x" onclick="delproduct(this)" /></td>
						</tr>
						<tr>
							<td colspan="9">
								<hr />
							</td>
						</tr>
						<tr height="115px" valign="center">
							<td class="jianju"><i></i></td>
							<td align="center"><img src="img/cart/pms_1474430362.70018703!80x80.jpg" /></td>
							<td align="left">
								<a href="#">小米自拍杆（线控版）黑色</a>
							</td>
							<td>49元</td>
							<td align="right" width="115px"><input type="button" name="" id="inputbtn1" value="-" /></td>
							<td width="70px"><input type="text" name="" class="inputtxt" value="1" onmouseleave="liKai(this)" /></td>
							<td width="115px" align="left"><input type="button" name="" id="inputbtn2" value="+" /></td>
							<td class="xiaoji">49元</td>
							<td align="center"><input type="button" name="" id="del" value="x" onclick="delproduct(this)" /></td>
						</tr>
					</tbody>
				</table>
			</div>
			<div id="jiesuan">
				<table border="0" cellspacing="0" cellpadding="0" width="100%">
					<tr height="50px">
						<td width="230px">
							<a href="#">继续购物</a> | <span>共<span id="num"></span>件商品，已选<span id="checked">0</span>件</span>
						</td>
						<td width="436px" align="right"></td>
						<td width="285px" align="left" style="color: #F56600;">合计(不含运费)：<span id="zongji">0.00</span>元</td>
						<td>
							<input type="button" name="" id="" value="去结算" class="jiesuanbtn fr" />
						</td>
					</tr>
				</table>
			</div>
			<table border="0" cellspacing="0" cellpadding="0" width="1220px" style="margin: 0px auto;">
				<tr height="110px" valign="center">
					<td width="365px">
						<hr size="1" color="#E0E0E0" />
					</td>
					<td width="480px" align="center" class="cartziti">买购物车中商品的人还买了</td>
					<td width="365px">
						<hr size="1" color="#E0E0E0" />
					</td>
				</tr>
			</table>
			<div id="remove">
				<div class="removetab">
					<div class="removetab-txt">
						确定删除吗？
						<input type="button" name="" id="delproduct" value="X" />
					</div>
					<div class="tabbtn">
						<input type="button" name="" id="cancel" value="取消" />
						<input type="button" name="" id="sure" value="确定" />
					</div>
				</div>
			</div>
			<div id="cart-product">
				<ul>
					<li>
						<img src="img/cart/pms_1487839278.99934443.jpg" width="140px" />
						<p>
							<a href="#">小米支架式自拍杆</a>
						</p>
						<p class="product-price">89元</p>
						<p class="review">2511人好评</p>
						<span class="jiacart">加入购物车</span>
					</li>
					<li>
						<img src="img/cart/pms_1482221011.26064844.jpg" width="140px" />
						<p>
							<a href="#">小米指环支架</a>
						</p>
						<p class="product-price">19元</p>
						<p class="review">1.5万人好评</p>
						<span class="jiacart">加入购物车</span>
					</li>
					<li>
						<img src="img/cart/pms_1497240755.4085185.jpg" width="140px" />
						<p>
							<a href="#">小米手环2腕带</a>
						</p>
						<p class="product-price">19.9元</p>
						<p class="review">1.6万人好评</p>
						<span class="jiacart">加入购物车</span>
					</li>
					<li>
						<img src="img/cart/pms_1468288696.74437986.jpg" width="140px" />
						<p>
							<a href="#">米家LED随身灯 增强版</a>
						</p>
						<p class="product-price">19.9元</p>
						<p class="review">3.6万人好评</p>
						<span class="jiacart">加入购物车</span>
					</li>
					<li style="margin: 0px 0px 15px 0px;">
						<img src="img/cart/pms_1497672764.01987286.jpg" width="140px" />
						<p>
							<a href="#">小米学院休闲双肩包</a>
						</p>
						<p class="product-price">79元</p>
						<p class="review">281人好评</p>
						<span class="jiacart">加入购物车</span>
					</li>
					<li>
						<img src="img/cart/pms_1481269289.59498154.jpg" width="140px" />
						<p>
							<a href="#">小米移动电源100000mAh高配版</a>
						</p>
						<p class="product-price">149元</p>
						<p class="review">8104人好评</p>
						<span class="jiacart">加入购物车</span>
					</li>
					<li>
						<img src="img/cart/pms_1476688193.46995320.jpg" width="140px" />
						<p>
							<a href="#">20000mAh小米移动电源2</a>
						</p>
						<p class="product-price">149元</p>
						<p class="review">1.7万人好评</p>
						<span class="jiacart">加入购物车</span>
					</li>
					<li>
						<img src="img/cart/pms_1495177293.09577974.jpg" width="140px" />
						<p>
							<a href="#">手机USB Type-C 金属数据线</a>
						</p>
						<p class="product-price">39元</p>
						<p class="review">887人好评</p>
						<span class="jiacart">加入购物车</span>
					</li>
					<li>
						<img src="img/cart/pms_1487839278.99934443.jpg" width="140px" />
						<p>
							<a href="#">小米活塞耳机 清新版</a>
						</p>
						<p class="product-price">29元</p>
						<p class="review">4.5万人好评</p>
						<span class="jiacart">加入购物车</span>
					</li>
					<li style="margin: 0px 0px 15px 0px;">
						<img src="img/cart/T1zL_vByCT1RXrhCrK.jpg" width="140px" />
						<p>
							<a href="#">小米随身WIFI</a>
						</p>
						<p class="product-price">19.9元</p>
						<p class="review">30.6万人好评</p>
						<span class="jiacart">加入购物车</span>
					</li>
				</ul>
			</div>
			<div id="footer">
				<div class="footer_1">
					<ul>
						<li class="li1">
							<a href="#">预约维修服务</a>
						</li>
						<li class="li2">
							<a href="#">7天无理由退货</a>
						</li>
						<li class="li3">
							<a href="#">15天免费换货</a>
						</li>
						<li class="li4">
							<a href="#">满150元包邮</a>
						</li>
						<li class="li5">
							<a href="#">520余家售后网点</a>
						</li>
					</ul>
				</div>
				<div class="footer_2">
					<dl>
						<dt><a href="#">帮助中心</a></dt>
						<dd>
							<a href="#">账户管理</a>
						</dd>
						<dd>
							<a href="#">购物指南</a>
						</dd>
						<dd>
							<a href="#">订单操作</a>
						</dd>
					</dl>
					<dl>

						<dt><a href="#">服务支持</a></dt>
						<dd>
							<a href="#">售后政策</a>
						</dd>
						<dd>
							<a href="#">自助服务</a>
						</dd>
						<dd>
							<a href="#">相关下载</a>
						</dd>
					</dl>
					<dl>
						<dt><a href="#">线下门店</a></dt>
						<dd>
							<a href="#">小米之家</a>
						</dd>
						<dd>
							<a href="#">服务网点</a>
						</dd>
						<dd>
							<a href="#">零售网点</a>
						</dd>
					</dl>
					<dl>
						<dt><a href="#">关于小米</a></dt>
						<dd>
							<a href="#">了解小米</a>
						</dd>
						<dd>
							<a href="#">加入小米</a>
						</dd>
						<dd>
							<a href="#">联系我们</a>
						</dd>
					</dl>
					<dl>
						<dt><a href="#">关注我们</a></dt>
						<dd>
							<a href="#">新浪微博</a>
						</dd>
						<dd>
							<a href="#">小米部落</a>
						</dd>
						<dd>
							<a href="#">官方微博</a>
						</dd>
					</dl>
					<dl>
						<dt><a href="#">特色服务</a></dt>
						<dd>
							<a href="#">F码通道</a>
						</dd>
						<dd>
							<a href="#">礼物码</a>
						</dd>
						<dd>
							<a href="#">防伪查询</a>
						</dd>
					</dl>
					<div class="phone fr">
						<p class="number">400-100-5678</p>
						<p>周一至周日 8:00-18:00</p>
						<p>（仅收市话费）</p>
						<p class="hourpic"></p>
					</div>
				</div>
			</div>
		</div>
		<div class="bg">
			<div class="footer_3 ">
				<div class="fl"><img src="img/SY/logo.png" align="center" /></div>
				<div class="fl footer_4">
					<ul>
						<li>
							<a href="#">小米商城</a>|</li>
						<li>
							<a href="#">MIUI</a>|</li>
						<li>
							<a href="#">米聊</a>|</li>
						<li>
							<a href="#">多看书城</a>|</li>
						<li>
							<a href="#">小米路由器</a>|</li>
						<li>
							<a href="#">视频电话</a>|</li>
						<li>
							<a href="#">小米淘宝直营店</a>|</li>
						<li>
							<a href="#">小米网盟</a>|</li>
						<li>
							<a href="#">小米移动</a>|</li>
						<li>
							<a href="#">隐私政策</a>|</li>
						<li>
							<a href="#">Select Region</a>|</li>
					</ul>
					<div style="clear: both;"></div>
					<p>
						<a href="#">&copy;mi.com</a>
						<a href="#">京ICP证110507号</a>
						<a href="#">京ICP备10046444号</a>
						<a href="#">京公网安备11010802020134号</a>
						<a href="#">京网文[2014]0059-0009号</a>
					</p>
					<p>违法和不良举报信息举报电话：185-0130-1238，本网站所列数据，除特殊说明，所有数据均出自我司实验测试</p>
				</div>
				<div class="fr">
					<img src="img/cart/truste.png" width="85px" />
					<img src="img/cart/v-logo-2.png" />
					<img src="img/cart/v-logo-1.png" />
					<img src="img/cart/v-logo-3.png" />
				</div>

			</div>

		</div>

		<script type="text/javascript">
			var iList = document.getElementById("tby").getElementsByTagName("i");
			var tab = document.getElementById("tab");
			for(var i = 0; i < iList.length; i++) {
				iList[i].onclick = function() {
					if(this.className == "active") {
						this.removeAttribute("class");
					} else {
						this.className = "active";
					}

				}
				tongji();
			}
			var quanxuan = document.getElementById("quanxuan");
			var iList = document.getElementById("tby").getElementsByTagName("i");
			var checked = document.getElementById("checked");
			quanxuan.addEventListener("click", function () {
				if(quanxuan.className == "active") {
					quanxuan.removeAttribute("class");
				} else {
					quanxuan.className = "active";
				}
				for(var i = 0; i < iList.length; i++) {
					iList[i].className = quanxuan.className;
				}
				if(checked.innerHTML==iList.length){
					checked.innerHTML=0;
				}
				else{
					checked.innerHTML=iList.length;
				}
				tongji();
			})
			var tby = document.getElementById("tby");
			tby.addEventListener("click", function() {
				var is = document.getElementById("tby").getElementsByTagName("i");
				var b = document.getElementById("tby").getElementsByClassName("active");
				var checked = document.getElementById("checked");
				if(b.length == is.length) {
					quanxuan.className = "active";
				} else {
					quanxuan.removeAttribute("class");
				}
				tongji();
				yixuan();
			});
			//用冒泡法则注册事件
			tab.addEventListener("click", function(event) {
				var remove = document.getElementById("remove");
				t = event.target || event.srcElement;
				var tr = t.parentNode.parentNode;
				var td5 = tr.children[5];
				var input1 = td5.children[0];
				if(event.target.value == "-") {
					var num = parseInt(input1.value);
					num--;
					input1.value = num;
					if(num <= 0) {
						input1.value = 1;
					}
					setXiaoJi(t);
				} else if(event.target.value == "+") {
					var num = parseInt(input1.value);
					num++;
					input1.value = num;
					setXiaoJi(t);
				}
			});

			function setXiaoJi(t) {
				var tr = t.parentNode.parentNode;
				var td4 = tr.children[3];
				var td8 = tr.children[7];
				var td5 = tr.children[5];
				var input2 = td5.children[0];
				var danjia = parseFloat(td4.innerHTML);
				var xiaoji = danjia * input2.value;
				td8.innerHTML = xiaoji + "元";
				tongji();
			}

			function liKai(t) {
				var tr = t.parentNode.parentNode;
				var td5 = tr.children[5];
				var input2 = td5.children[0];
				var input3 = parseInt(input2.value)
				if(input3 <= 0) {
					input2.value = 1;
				}
				setXiaoJi(t);
			}

			function $(id) {
				return document.getElementById(id);
			}

			function tongji() {
				var sum = 0.00;
				var rows = $("tab").children[1].children;
				for(var i = 0; i < rows.length; i++) {
					var cbo = rows[i].firstElementChild.firstElementChild;
					if(cbo.className == "active") {
						sum += parseFloat(rows[i].children[7].innerHTML)
					}
				}
				$("zongji").innerHTML = sum;
			}
			function quanbu() {
				var tby = document.getElementById("tby");
				var is = document.getElementById("tby").getElementsByTagName("i");
				var num = document.getElementById("num");
				num.innerHTML = is.length;
			};
			quanbu();
             function yixuan(){
             	var tby = document.getElementById("tby");
             	b = document.getElementById("tby").getElementsByClassName("active");
				var checked = document.getElementById("checked");
				if(b.length<0){
					checked.innerHTML=0;
				}
				else{
					checked.innerHTML=b.length;
				}
				}
			function delproduct(t) {
				var that = t;
				var remove = document.getElementById("remove");
				var removetab = document.querySelector(".removetab");
				remove.style.display = "block";
				removetab.style.animation = "fall 0.5s";
				removetab.style.top = 20 + "px";
				var sure = document.getElementById("sure");
				sure.addEventListener("click", function() {
					var tab = document.getElementById("tab");
					tab.deleteRow(that.parentNode.parentNode.rowIndex);
					removetab.style.animation = "fly 0.5s";
					removetab.style.top = -300 + "px";
					setTimeout(function() {
						if(removetab.style.top == "-300px") {
							remove.style.display = "none";
						}
					}, 500);
					yixuan();
					tongji();
					quanbu();
				});
				removetab.addEventListener("click", function(event) {
					t = event.target || event.srcElement;
					if(t.value == "X" || t.value == "取消") {
						removetab.style.animation = "fly 0.5s";
						removetab.style.top = -300 + "px";
						setTimeout(function() {
							if(removetab.style.top == "-300px") {
								remove.style.display = "none";
							}
						}, 500);
					}
				});
			}
			
		</script>
	</body>

</html>